<template>
	<div class="scroll-view-demo2">
		<ynet-scroll-view
			ref="scrollView"
			:scrolling-x="false"
			@refreshing="$_onRefresh"
		>
			<ynet-scroll-view-refresh
				slot="refresh"
				slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
				:scroll-top="scrollTop"
				:is-refreshing="isRefreshing"
				:is-refresh-active="isRefreshActive"
			></ynet-scroll-view-refresh>
			<div
				v-for="i in list"
				:key="i"
				class="scroll-view-list"
			>
				<p class="scroll-view-item">{{i}}</p>
			</div>
		</ynet-scroll-view>
	</div>
</template>
<script>
	import { ScrollView, ScrollViewRefresh } from 'ynet-mobile'
	export default {
		title: '下拉刷新',
		name: 'scroll-view-demo',
		components: {
			[ScrollView.name]: ScrollView,
			[ScrollViewRefresh.name]: ScrollViewRefresh
		},
		data(){
			return {
				list: 5
			}
		},
		methods: {
			$_onRefresh(){
				setTimeout(() => {
					this.list += 5
					this.$refs.scrollView.finishRefresh()
				}, 2000)
			}
		}
	}
</script>
<style lang="scss">
.scroll-view-demo2{
	height: 5.6rem;

	.scroll-view-item{
		padding: .3rem 0;
		text-align: center;
		font-size: 28px;
		border-bottom: .5px solid #ccc;
	}
}


</style>